<template>
    <div>
        <el-card>
            <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small" class="admin_from">
                <!--                <el-form-item label="">-->
                <!--                    <el-input v-model="searchForm.mch" placeholder="请输入代理商ID"></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.sn" placeholder="请输入单号"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.third_trade_no" placeholder="请输入第三方单号"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.paymodel" placeholder="请选择支付方式" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="微信" value="1"></el-option>
                        <el-option label="支付宝" value="2"></el-option>
                        <el-option label="苹果内购" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small" class="admin_from">
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-input v-model="searchForm.user_id" placeholder="请输入用户ID"></el-input>
                </el-form-item>
                <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable
                               :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                        <el-option label="未支付" value="1"></el-option>
                        <el-option label="已支付" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.start_time"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.end_time"
                                            value-format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="#">
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="日期">
                </el-table-column>
                <el-table-column
                        prop="sn"
                        label="订单号">
                </el-table-column>
                <el-table-column
                        label="用户信息">
                    <template slot-scope="scope">
                        <div class="img">
                            <img :src="scope.row.userInfo.avatar" alt="" width="30" height="30">
                            <div>
                                <p>{{scope.row.userInfo.id}}</p>
                                <p>{{scope.row.userInfo.nickname}}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="代理信息">
                    <template slot-scope="scope">
                        <div class="img">
                            <div>
                                <p>{{scope.row.mchInfo.id}}</p>
                                <p>{{scope.row.mchInfo.name}}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="day"
                        label="VIP天数">
                </el-table-column>
                <el-table-column
                        prop="sday"
                        label="赠送天数">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格">
                </el-table-column>
                <el-table-column
                        prop="third_trade_no"
                        label="第三方支付单号">
                </el-table-column>
                <el-table-column
                        prop="isyear"
                        label="支付方式">
                    <template slot-scope="scope">
                        <span v-if="scope.row.paymodel==1">微信</span>
                        <span v-if="scope.row.paymodel==2">支付宝</span>
                        <span v-if="scope.row.paymodel==3">苹果内购</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status == 2">已支付</el-tag>
                        <el-tag type="danger" v-if="scope.row.status == 1">未支付</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="pay_time"
                        label="支付时间">
                </el-table-column>
            </el-table>
            <div class="el-pagination">
                <el-pagination
                        background
                        @size-change="changeSize"
                        @current-change="changeCurrent"
                        :current-page="params.pagenum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="params.pagesize"
                        :layout="this.$store.state.paginationLayout"
                        :total="params.totals">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {formatDate} from '../../utils/common'

    export default {
        name: "User",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0
                },
                form: {
                    subscribe: '',
                    charge: '',
                    nickname: '',
                },
                dataForm: {
                    title: '',
                    name: '',
                    username: '',
                    tpassword: '',
                    phone: '',
                    weixin: '',
                    lv: '',
                    qq: '',
                    onums: '',
                    desc: '',
                    receiptmodel: '',
                    bank: '',
                    bankname: '',
                    bankno: '',
                    account: '',
                    realname: '',
                    status: '',
                },
                imgData: {},
                domain: '',
                tableData: [],
                fromTitle: '',
                visible: false,
                imageUrl: '',
                id: '',
                searchForm: {
                    sn: '',
                    third_trade_no: '',
                    paymodel: '',
                    user_id: '',
                    status: '',
                    mch: '',
                    start_time: '',
                    end_time: ''
                }
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                let data = {
                    page: this.params.pagenum,
                    page_size: this.params.pagesize,
                    status: this.searchForm.status,
                    paymodel: this.searchForm.paymodel,
                    sn: this.searchForm.sn,
                    third_trade_no: this.searchForm.third_trade_no,
                    user_id: this.searchForm.user_id,
                    start_time: this.searchForm.start_time,
                    end_time: this.searchForm.end_time
                };
                this.$axios.post("mch/agent/vip", data).then((res) => {
                    this.params.totals = parseInt(res.data.count);
                    this.tableData = res.data.list;
                    this.tableData.map((num) => {
                        num.pay_time = formatDate(num.pay_time)
                    })
                });
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList()
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList()
            },
            search() {
                this.params.pagenum = 1;
                this.getList();
            },
        }
    }
</script>

<style scoped>
    .img {
        display: flex;
        align-items: center;
    }

    .img > img {
        margin-right: 10px;
    }
</style>